<!--
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2023-11-29 09:50:03
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-01-10 14:55:28
 * @FilePath: \partal\src\views\project\index.vue
 * @Description: 项目案例
-->
<script lang="ts" setup>
  import { useRouter } from 'vue-router'
  import datas from '@/config/project'
  import { PAGE_PROJECT_PROJECT_DETAIL } from '@/enum/pageEnum';

  const router = useRouter()

  const goDetail = (source: string) => router.push(`${PAGE_PROJECT_PROJECT_DETAIL}?source=${source}`)
</script>

<template>
  <div class="project">
    <p class="title">项目案例</p>
    <p class="desc">包含组件设计文件和定制化标注插件，可快速产出设计稿</p>
    <div class="content">
      <div class="content-item" v-for="(item, i) in datas" :key="`content-item${i}`" @click="goDetail(item.source)">
        <img class="content-item-img" :src="item.imgs[0]" />
        <p class="content-item-name">{{ item.name }}</p>
      </div>
    </div>
  </div>
</template>

<style type="less" scoped>
  .project {
    width: 1200px;
    margin: auto;
    padding: 36px 0 108px 0;
    > .title {
      height: 45px;
      font-size: 36px;
      color: #1d2129;
      line-height: 45px;
    }
    > .desc {
      margin-top: 12px;
      height: 22px;
      font-size: 14px;
      color: #4e5969;
      line-height: 22px;
    }
    > .content {
      margin-top: 40px;
      display: flex;
      flex-wrap: wrap;
      > .content-item {
        width: 288px;
        margin: 0 12px 64px 0;
        > .content-item-img {
          width: 288px;
          height: auto;
          border-radius: 8px;
          border: 1px solid #e5e6eb;
        }
        > .content-item-name {
          margin-top: 16px;
          height: 24px;
          line-height: 24px;
          font-size: 16px;
          color: #1d2129;
        }
      }
    }
  }
</style>
